<template>
  <div class="accountManage">
    <div class="manage-box">
      <div class="btnRow">
        <el-input v-model="name" placeholder="请输入姓名"></el-input>
        <el-select v-model="sex" placeholder="性别">
          <el-option
            v-for="item in sexOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="sex" placeholder="科室">
          <el-option
            v-for="item in positionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="state" placeholder="是否出科">
          <el-option
            v-for="item in stateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button icon="el-icon-search" circle></el-button>
      </div>
      <div class="record">
        <el-table :data="tableList" style="width: 100%">
          <el-table-column prop="id" label="账号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">{{ scope.row.sex == "1" ? "男" : "女" }}</template>
          </el-table-column>
          <el-table-column prop="inTime" label="入科时间"></el-table-column>
          <el-table-column prop="outTime" label="出科时间"></el-table-column>
          <el-table-column prop="department" label="外科"></el-table-column>
          <!-- <el-table-column prop="position" label="职位">
          </el-table-column>-->
          <el-table-column prop="phoneNumber" label="手机号码"></el-table-column>
          <el-table-column prop="idNumber" label="身份证"></el-table-column>
          <!-- <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              {{ scope.row.state == "1" ? "正常" : "异常" }}
            </template>
          </el-table-column>-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link type="primary" @click="turnDepartment">转科</el-link>
              <el-link type="primary" @click="outDepartment">出科</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage2"
          :page-sizes="[5, 10]"
          :page-size="100"
          layout="sizes, prev, pager, next"
          :total="1000"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      name: "",
      sex: "",
      state: "",
      sexOptions: [
        {
          value: "0",
          label: "女"
        },
        {
          value: "1",
          label: "男"
        }
      ],
      stateList: [
        {
          value: "0",
          label: "未出科"
        },
        {
          value: "1",
          label: "已出科"
        }
      ],
      positionList: [
        {
          value: "1",
          label: "前台管理"
        },
        {
          value: "2",
          label: "护士"
        },
        {
          value: "3",
          label: "医生"
        }
      ],
      tableList: [
        {
          id: "1",
          name: "小三",
          sex: "1",
          inTime: "2021-22-2",
          outTime: "2021-22-2",
          position: "1",
          department: "外科",
          phoneNumber: "12801814",
          idNumber: "11231414141414141",
          state: "1"
        },
        {
          id: "2",
          name: "小三",
          sex: "1",
          inTime: "2021-22-2",
          outTime: "",
          position: "1",
          department: "外科",
          phoneNumber: "12801814",
          idNumber: "11231414141414141",
          state: "1"
        }
      ],
      form: {
        name: "",
        password: "",
        phoneNumber: "",
        numberId: "",
        sex: "1",
        position: "",
        birth: ""
      },
      dialogVisible: false,
      dialogVisible2: false,
      limit: true
    };
  },
  created() {},
  methods: {
    turnDepartment() {},
    outDepartment() {}
  }
};
</script>

<style scoped>
.btnRow {
  padding: 10px;
}

.btnRow .el-input {
  width: 300px;
}

.accountManage {
  height: 100%;
}

.manage-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.record {
  position: absolute;
  bottom: 120px;
  top: 130px;
  left: 10px;
  right: 10px;
}

.record .el-table {
  height: 100%;
  width: 100%;
}

.page {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.manage-box .el-form .el-date-editor {
  width: 100%;
}

.manage-box .el-form .el-select {
  width: 100%;
}
</style>